<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="main">
			<view class="main-form">
				<view class="form-info">
					<view class="passwordLogin" v-if="loginState">
						<u-transition :show="loginState" mode="fade-down">
							<view class="infoText">
								• 已注册并设置密码的用户，可通过账号密码登录
							</view>
							<view class="infoText">
								• 未注册的用户可切换验证码登录完成注册并设置密码
							</view>
						</u-transition>
					</view>
					<view class="messageLogin" v-else>
						<u-transition :show="!loginState" mode="fade-down">
							<view class="infoText">
								• 未注册的手机号码验证成功后自动完成注册并登录。
							</view>
							<view class="infoText">
								• 请在10分钟内完成注册，否则验证码将失效。
							</view>
							<view class="infoText">
								• 若未收到验证码，
							</view>
						</u-transition>
					</view>
				</view>
				<view class="form-input">
					<view v-if="loginState">
						<u-transition :show="loginState" mode="fade-down">
							<view class="caseInput">
								<input type="text" v-model="formData.username" class="inp"
									:placeholder="usernamePlaceholder" placeholder-class="title_input"
									@focus="onInputUsernameFocus" @blur="onInputUsernameBlur" />
							</view>
							<view class="caseInput">
								<input type="password" v-model="formData.password" class="inp"
									:placeholder="passwordPlaceholder" placeholder-class="title_input"
									@focus="onInputPasswordFocus" @blur="onInputPasswordBlur" />
							</view>
						</u-transition>
					</view>
					<view class="caseCode" v-else>
						<u-transition :show="!loginState" mode="fade-down">
							<view class="caseInput-num">
								<input type="text" v-model="formData.username" class="inp-num"
									:placeholder="usernamePlaceholder" placeholder-class="title_input"
									@focus="onInputUsernameFocus" @blur="onInputUsernameBlur" />
							</view>
							<view class="caseInput-code">
								<input type="text" v-model="formData.code" class="inp-code"
									:placeholder="codePlaceholder" placeholder-class="title_input"
									@focus="onInputCodeFocus" @blur="onInputCodeBlur" />
								<text @click="getCode" :disabled="isCountingDown"
									class="codeBtn">{{ countDownText }}</text>
							</view>
						</u-transition>
					</view>
				</view>
				<view class="form-qita">
					<view class="textBtn1">
						<text class="" @click="changeLogin">切换验证码登录</text>
					</view>
					<view class="textBtn2">
						<text class="" @click="wangjimima">忘记密码?</text>
					</view>
				</view>
			</view>
			<!-- <view class="main-btn">
				<u-button  text="立 即 登 录" class="main-btn-botton" shape="circle" :disabled="checked===false"  @click="loginInfo()"></u-button>
			</view> -->
			<view class="login-row">
				<view class="login-btn" @click="loginInfo()">立 即 登 录</view>
			</view>
			<view class="agreement" @click="checkbox()">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="checked" shape="circle" active-color="#B68205" size="30rpx"></u-checkbox>
				</u-checkbox-group>
				<text class="text text0">我已阅读并同意</text>
				<text class="text1" @click="goToRegister(1)">《用户协议》</text>
				<text class="text">和</text>
				<text class="text1" @click="goToRegister(2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		loginByCode,
		getPhoneCode
	} from '../api/index.js';
	// // 手机号
	// var checkPhone = (rule, value, callback) => {
	//   if (!value) {
	//     return callback(new Error('手机号不能为空'))
	//   } else {
	//     // 手机号（以 1 开头）：
	//     const reg = /^(?:(?:\+|00)86)?1\d{10}$/
	//     console.log(reg.test(value))
	//     if (reg.test(value)) {
	//       callback()
	//     } else {
	//       return callback(new Error('请输入正确的手机号'))
	//     }
	//   }
	// }
	export default {
		data() {
			return {
				pageLoading:false,
				formData: {
					username: '',
					password: ''
				}, //  登录入参
				usernamePlaceholder: '请输入手机号码',
				passwordPlaceholder: '请输入密码',
				codePlaceholder: '请输入验证码',
				border: true,
				checked: false,
				loginState: true,
				phoneNum: '',
				mima: '',
				code: '',
				isCountingDown: false,
				countDownSeconds: 60,
				countDownText: '获取验证码'
			}
		},
		methods: {
			onInputCodeFocus() {
				this.codePlaceholder = ''
			},
			onInputCodeBlur() {
				if (this.code === '') {
					this.codePlaceholder = '请输入验证码'
				}
			},
			onInputUsernameFocus() {
				this.usernamePlaceholder = ''
			},
			onInputUsernameBlur() {
				if (this.formData.username === '') {
					this.usernamePlaceholder = '请输入手机号码'
				}
			},
			onInputPasswordFocus() {
				this.passwordPlaceholder = ''
			},
			onInputPasswordBlur() {
				if (this.formData.username === '') {
					this.passwordPlaceholder = '请输入密码'
				}
			},
			//登录提交
			loginInfo() {
				// uni.switchTab({
				// 	url: '/src/views/pageMain/pageHome/index'
				//   });
				if (this.checked === false) {
					uni.$u.toast('请勾选我已阅读')
				} else {
					console.log(this.formData.username, this.formData.password)
					if (this.formData.username === '' || this.formData.password === '') {
						uni.$u.toast('请输入用户名或密码')
					} else {
						this.pageLoading = true
						console.log(this.loginState,'2222222')
						if (this.loginState) {
							// 登陆用户名登陆
							//接口后期打开
							login(this.formData).then(response => {
								console.log(response)
								if (response.code === 0) {
									uni.setStorageSync('token', response.data.token); //存储token
									uni.setStorageSync('isLogin', true); //存储登录状态
									uni.setStorageSync('userInfo', response.data); //存储个人信息
									uni.showToast({
										title: '登录成功',
										icon: 'success',
										duration: 3000,
										complete: () => {
											uni.switchTab({
												url: '/src/views/pageMain/pageHome/index'
											});
										}
									});
									this.pageLoading = false
								} else {
									// file:///Users/hmm/develop/FYLM-QSFY-wechatApps/src/views/pageMine/xiugaimima/index.vue
									console.log(response.code)
									if (response.code === 2) {
										uni.navigateTo({
											url: '/src/views/pageLogin/register/index'
										})
									}else{
										uni.$u.toast(response.msg)
										this.pageLoading = false
									}
								}
							}).catch(errors => {
								// uni.$u.toast(errors)
								this.pageLoading = false
							})
						} else {
							// 验证码登陆
							loginByCode(this.formData).then(response => {
								console.log(response)
								if (response.code === 0) {
									uni.setStorageSync('token', response.data.token); //存储token
									uni.setStorageSync('isLogin', true); //存储登录状态
									uni.setStorageSync('userInfo', response.data); //存储个人信息
									uni.showToast({
										title: '登录成功',
										icon: 'success',
										duration: 3000,
										complete: () => {
											uni.switchTab({
												url: '/src/views/pageMain/pageHome/index'
											});
										}
									});
							  }else{
								  // file:///Users/hmm/develop/FYLM-QSFY-wechatApps/src/views/pageMine/xiugaimima/index.vue
								 uni.$u.toast(response.msg) 
								 if (response.code === 2) {
								 	uni.navigateTo({
								 		url: '/src/views/pageLogin/register/index'
								 	})
								 }else{
								 	uni.$u.toast(response.msg)
								 	this.pageLoading = false
								 }
							  }
							}).catch(errors => {
							  // uni.$u.toast(errors)
							})
						}
					}
				}
				
			},
			goToRegister(e) {
				console.log(1)
				switch (e){
					case 1:
						uni.navigateTo({
						  url: '/src/views/pageLogin/yonghuxieyi/index'
						});
						break;
					case 2:
						uni.navigateTo({
						  url: '/src/views/pageLogin/yinsizhengce/index'
						});
						break;
					default:
						break;
				}
			},
			checkbox() {
				console.log(1)
				// this.checked = !this.checked
			},
			checkboxGroupChange() {
				console.log(2)
				this.checked = !this.checked
			},
			changeLogin() {
				this.formData={}
				this.usernamePlaceholder='请输入手机号码'
				this.loginState = !this.loginState
			},
			wangjimima() {
				uni.navigateTo({
				  url: '/src/views/pageMine/xiugaimima/wangjimima/index'
				});
			},
			// 获取验证码
			getCode() {
				if(this.formData.username&&this.formData.username!==''){
					getPhoneCode({phoneNumber:this.formData.username}).then(response => {
					  console.log(response)
					  if (response.code === 0) {
						   if (!this.isCountingDown) {
						   				this.isCountingDown = true;
						   				this.countDown();
						   }
						}else{
							 uni.$u.toast(response.msg) 
						}
					})
				}else{
					 uni.$u.toast('请输入手机号') 
				}
				
			 
			},
			// 获取验证码倒计时
			countDown() {
			  let timer = setInterval(() => {
				if (this.countDownSeconds > 0) {
				  this.countDownSeconds--;
				  this.countDownText = `${this.countDownSeconds} 秒后重新获取`;
				} else {
				  clearInterval(timer);
				  this.isCountingDown = false;
				  this.countDownSeconds = 60;
				  this.countDownText = '获取验证码';
				}
			  }, 500);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	::v-deep .u-button--circle {
		height: 56rpx;
		color: #FF9907;
	}

	::v-deep .u-button--circle {
		height: 56rpx !important;
		color: #FF9907 !important;
	}

	.container {
		position: relative;
		background-color: #FFB607;
		height: 100vh;
	}

	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20%;
	}

	.main-form {
		width: 599rpx;
		height: 622rpx;
		margin-bottom: 80rpx;
		padding: 70rpx;
		background-image: url(#{$bgImageUrl}/assets/1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		padding-top: 30%;
	}

	.form-info {
		display: flex;
		flex-direction: column;
		align-items: left;
	}

	.form-input {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
	}

	.infoText {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		line-height: 29rpx;
	}

	.inp {
		width: 490rpx;
		height: 56rpx;
		background: #FFB607;
		border-radius: 28rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFF38B;
		line-height: 51rpx;
	}

	.caseCode {
		margin-bottom: 30rpx;
	}

	.caseInput-num {
		width: 490rpx;
		height: 56rpx;
		padding-left: 15%;
		background: #FFB607;
		border-radius: 28rpx;
		margin-bottom: 30rpx;
		text-align: left;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFF38B;
		line-height: 51rpx;
	}

	.inp-num {
		height: 56rpx;
		border-radius: 28rpx;
		text-align: left;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFF38B;
	}

	.caseInput-code {
		width: 490rpx;
		height: 56rpx;
		background: #FFB607;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
	}

	.inp-code {
		width: 60%;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFF38B;
	}

	.codeBtn {
		width: 40%;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-right: 10rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #4D4D4D;
		line-height: 40rpx;
	}

	::v-deep.title_input {
		color: #FFF38B;
	}

	.count-down-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.form-qita {
		display: flex;
	}

	.textBtn1 {
		flex: 1;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #4D4D4D;
		line-height: 51rpx;
	}

	.textBtn2 {
		flex: 1;
		text-align: right;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #4D4D4D;
		line-height: 51rpx;
	}

	// .main-btn{
	// 	width: 600rpx;
	// 	height: 56rpx;
	// 	// background: #FFFFFF;
	// 	// border-radius: 28rpx;
	// 	text-align: center;
	// 	font-family: Source Han Sans CN;
	// 	font-weight: bold;
	// 	font-size: 25rpx;
	// 	color: #FF9907;
	// 	line-height: 56rpx;
	// }

	// .main-btn button{
	// 	height: 56rpx;
	// 	color: #FF9907;
	// }
	// .main-btn-botton:disabled{
	// 	height: 56rpx;
	// 	color: #FFFFFF;
	// }
	.login-row {
		margin: 0;
	}

	.login-btn {
		width: 600rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 25rpx;
		color: #FF9907;
		line-height: 56rpx;
	}

	.agreement {
		display: flex;
		justify-content: center; // 水平居中
		align-items: center; // 垂直居中
		background-color: #FFB607;
		width: 100%;
		margin-top: 60rpx;
		text-align: center;
	}
	.text0 {
		padding-right: 10rpx;
	}
	.text {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #9F6028;
		line-height: 50rpx;
	}

	.text1 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #f1f1f1;
		line-height: 50rpx;
	}
</style>